<template>
  <!--  <div class="login-container">-->
  <!--    <div class="login-background"></div>-->
  <!--    <div class="login-card">-->
  <!--      <header class="login-header">-->
  <!--        <img :src="logoMini" alt="Logo" class="login-logo" />-->
  <!--        <h3 class="login-title">{{ getThemeConfig.globalTitle }}</h3>-->
  <!--        <p class="login-subtitle">{{ getThemeConfig.globalViceTitle }} {{ getThemeConfig.globalViceTitleMsg }}</p>-->
  <!--      </header>-->
  <!--      <main class="login-content">-->
  <!--        <Account />-->
  <!--      </main>-->
  <!--    </div>-->
  <!--  </div>-->


  <div class="main">
    <div class="header" style="height: 20% ">
      <span>{{ getThemeConfig.globalTitle }}</span>
    </div>
    <main class="login-content">
      <div class="login-image">
        <img class="image-item" src="../../assets/login-box.svg"/>
        <div class="footer-text">
          <span>
                应用中台，技术中台，顶层设计，分布式架构<br/>
                支持平台化、系统化、个性化<br/>
                打通业务壁垒，数据智能化展现<br/>
          </span>
        </div>
      </div>
      <div class="login-form">
        <Account/>
      </div>

    </main>

  </div>

</template>

<script setup lang="ts" name="loginIndex">
import {computed, defineAsyncComponent, onMounted} from 'vue';
import {storeToRefs} from 'pinia';
import {useThemeConfig} from '/@/stores/themeConfig';
import {NextLoading} from '/@/utils/loading';

// 引入组件（现在只需要Account）
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));

// 定义变量内容
const storesThemeConfig = useThemeConfig();
const {themeConfig} = storeToRefs(storesThemeConfig);
// 现在不需要关于切换登录方式的state了

// 获取布局配置信息
const getThemeConfig = computed(() => {
  return themeConfig.value;
});

// 页面加载时
onMounted(() => {
  NextLoading.done();
});
</script>
<style scoped lang="scss">
.login-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: 0.75;
  }

  .login-card {
    background-color: var(--el-color-white);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    max-width: 400px;
    text-align: center;

    & > header {
      margin-bottom: 2rem;

      .login-logo {
        width: 80px;
        height: auto;
      }

      .login-title {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
      }

      .login-subtitle {
        color: var(--el-text-color-secondary);
        font-size: 1.2rem;
      }
    }

    & > main {
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.3s;
      }

      .fade-enter-from,
      .fade-leave-to {
        opacity: 0;
      }

      .slide-fade-enter-active,
      .slide-fade-leave-active {
        transition: all 0.3s;
      }

      .slide-fade-enter-from,
      .slide-fade-leave-to {
        transform: translateY(100%);
      }

      .login-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 1.5rem;
        cursor: pointer;
        user-select: none;

        .login-toggle-icon {
          font-size: 1.5rem;
          color: var(--el-color-primary);
        }
      }
    }
  }
}

.header {
  span {
    top: 50px;
    position: absolute;
    margin-left: 5%;
    font-size: 35px;
    font-family: "华文行楷", sans-serif;
    color: #ffffff;
  }

}

.footer {
  background: #1d4283;
}

.login-content {
  height: 80%;
  padding-top: 10%;
  width: auto;
}

.main {
  height: 100%;
  background-image: url("../../assets/login-bg.svg");
  background-position: 109%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  //border: 3px, solid,;
}

.login-image {
  margin-left: 20%;
  height: 100%;
  display: inline-block;
  margin-top: -4%;
}

.image-item {
  height: 40%;
  width: 40%;
}

.login-form {
  vertical-align: top;
  height: 100%;
  display: inline-block;
  width: 20%;
  margin-left: 20%;
  margin-top: 1%;

}

.footer-text {
  color: #ffffff;
  font-size: 14px;
}

//
//.footer-text {
//  color: #ffffff;
//  font-size: 14px;
//}

</style>